import React from 'react';

interface NotFoundProps {}

const NotFound: React.FC<NotFoundProps> = () => {
  const handleGoBack = (): void => {
    window.history.back();
  };

  return (
    <div style={{ 
      padding: '40px', 
      textAlign: 'center', 
      minHeight: '400px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <h1 style={{ fontSize: '4rem', margin: '0', color: '#ff6b6b' }}>404</h1>
      <h2 style={{ margin: '20px 0', color: '#333' }}>页面未找到</h2>
      <p style={{ fontSize: '1.2rem', color: '#666', maxWidth: '500px', lineHeight: '1.6' }}>
        抱歉，您访问的页面不存在。请检查URL是否正确，或者返回首页继续浏览。
      </p>
      <div style={{ marginTop: '30px' }}>
        <button
          onClick={handleGoBack}
          style={{
            backgroundColor: '#007bff',
            color: 'white',
            padding: '12px 24px',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px',
            marginRight: '10px'
          }}
        >
          返回上页
        </button>
        <a
          href="/"
          style={{
            backgroundColor: '#28a745',
            color: 'white',
            padding: '12px 24px',
            textDecoration: 'none',
            borderRadius: '4px',
            fontSize: '16px',
            display: 'inline-block'
          }}
        >
          返回首页
        </a>
      </div>
    </div>
  );
};

export default NotFound;
